<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        .layui-col-space15>* {
             padding: 0px;
        }

        .bordered-div {
            border: 1px solid #e6e6e6;
            padding: 10px;

        }

        /*.layui-tree-iconClick {*/
        /*    display: none; !* 隐藏 tree 前面的图标 *!*/
        /*}*/
        .layui-tree-txt {
            position: relative;
            display: inline-block;
        }
        .red-number {
            position: absolute;
            top: -10px;
            background-color: #ff0000;
            color: white;
            padding: 1px 1px;
            border-radius: 50%;
            border-color: white;
            font-size: 8px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body mini-bar" id="ltTree">
        </div>
    </div>
    <div class="layui-form">
        <div class="layui-form-item bordered-div" id="checkboxContainer">
            <!-- 复选框容器 -->
        </div>
    </div>
</div>
<!--<div class="layui-fluid">-->
<!--    <div class="layui-row layui-col-space15">-->
<!--        <div class="layui-col-sm12 layui-col-md2 layui-col-lg2">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-body mini-bar" id="ltTree">-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-sm12 layui-col-md8 layui-col-lg10">-->
<!--        <div class="layui-form">-->
<!--            <div class="layui-form-item bordered-div" id="checkboxContainer">-->
<!--                &lt;!&ndash; 复选框容器 &ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->

<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<span id="nr" style="display: none;margin-left: 15px">已选<span id="chooseCount"></span>项，匹配纳税人<span
        id="nsrCount">888</span>户</span>

</body>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script language="JavaScript" src="/newmain/js/bizjs/gy.js"></script>
<script>
    //获取token
    let token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    let tokenQuery = token.replace("#", "%23");
    let $ = jQuery = layui.jquery;
    let choosed = 0;
    let choosedIds=[];
    let currentLeafObj;
    let countObj={};
    $(function () {
        layui.use(['layer', 'form', 'table', 'util', 'tree'], function () {
            let $ = layui.jquery;
            let form = layui.form;
            let tree = layui.tree;
            CoreUtil
                .sendGet(
                    "/attention/xazb/tree",
                    null,
                    function (res) {
                        let treeData = res.data;
                        //动态定义变量用来显示数
                        treeData.forEach(function(item){
                             let varname = "count_"+item.id;
                            countObj[varname]=0;
                        });
                        console.log(countObj);
                        // 树形渲染
                        tree.render({
                            elem: '#ltTree',
                            data: treeData,
                            click: function (obj) {
                                getXazbMx(obj);
                                currentLeafObj = obj;
                                // console.log(obj.data); //得到当前点击的节点数据
                                // console.log("树形点击事件===" + obj.data.id);
                                // console.log("树形点击事件===" + obj.data.title);
                            }
                        });
                    });

            function getXazbMx(obj){
                $('#checkboxContainer').empty();
                let xazbdlid = obj.data.id;
                //获取指标明细数据
                CoreUtil.sendPost("/attention/xazb/getXazbMx", {"xazbdlid":xazbdlid}, function(res) {
                    let datas = res.data;
                    datas.forEach(function(item){
                        let checkboxHtml = '<input type="checkbox" name="checkbox"   title="' + item.name + '" id="' + item.id + '" data-dlid="' + xazbdlid +'">';
                        choosedIds.forEach(function(id) {
                            if(item.id == id){
                                checkboxHtml = '<input type="checkbox" name="checkbox" checked  title="' + item.name + '" id="' + item.id + '" data-dlid="' + xazbdlid + '">';
                            }
                        });
                        $('#checkboxContainer').append(checkboxHtml);
                    });
                    // 重新渲染复选框
                    form.render('checkbox');
                });
                console.log("choosedIds==>"+choosedIds);
                choosedIds.forEach(function(id) {
                    $('#checkboxContainer input[type=checkbox][id=' + id + ']').prop('checked', true);
                });
                form.render('checkbox');
            }
            // 监听复选框事件
            form.on('checkbox', function(data){
                let dlid = $(this).data('dlid');
                let prop = 'count_'+dlid;
                let currentdlidount = countObj[prop]
                if (data.elem.checked) {
                    choosed++;
                    currentdlidount++;
                    console.log('复选框 ' + data.elem.id + ' 被选中');
                    // 选中时将 ID 添加到数组中
                    if (choosedIds.indexOf(data.elem.id) === -1) {
                        choosedIds.push(data.elem.id);
                    }
                } else {
                    choosed--;
                    currentdlidount--;
                    console.log('复选框 ' + data.elem.id + ' 被取消选中');
                    let index = choosedIds.indexOf(data.elem.id);
                    if (index !== -1) {
                        choosedIds.splice(index, 1);
                    }
                }
                countObj[prop]=currentdlidount;
                $('#chooseCount').text(choosed);
                $('#nr').css('display', 'block');
                if(currentdlidount != 0 ){
                    $(currentLeafObj.elem).find('.layui-tree-txt').append('<span class="red-number">'+currentdlidount+'</span>'); // 根据需要修改数字
                }else {
                    $(currentLeafObj.elem).find('.red-number').remove();
                }
            });
        });
        });
</script>
</html>